<template>
  <h2>Music</h2>
  <button @click="$router.push('/home/music/item/jay')">周杰伦</button>
  <button @click="toItem">周杰</button>
  <button @click="router.push('/home/music/item/zl')">周伦</button>

  <router-view></router-view>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Music",
});
</script>

<script setup lang="ts">
import { onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

onMounted(() => {
  console.log("onMounted");
});
onUnmounted(() => {
  console.log(onUnmounted);
});

const toItem = () => {
  router.push({
    name: "musicItem",
    params: {
      name: "周杰",
    },
    query: {
      age: 18,
    },
  });
};
</script>

<style scoped></style>
